<template>
	<view class="page" :style="{'height':(h-mt-10)+'px','padding-top':mt+'px'}">
		<c-nav-bar title="停车记录"></c-nav-bar>
		<view v-for="(item,index) in list" :key="index">
			<view class="licence">
				<text>{{item.numberplate}}</text>
				<text>-{{item.paymentMoney.toFixed(2)}}元</text>
			</view>
			<view class="addr">
				<view>
					<image src="https://i.ringzle.com/file/20231106/e3d8756b026849a69a24980df25bf3af.png"></image>
					<text>{{item.nameIsland}}-{{item.parkadeName}}</text>
				</view>
				<view>
					<image src="https://i.ringzle.com/file/20231108/54bc2c75dfde4b83b2089faf1061624d.png"></image>
					<text>{{item.parkTime}}</text>
				</view>
			</view>
			<view class="time">
				<view>
					<view class="t_in"></view>
					<view class="t_text">进场时间：<text>{{item.enterTime}}</text></view>
				</view>
				<view>
					<view class="t_out"></view>
					<view class="t_text">出场时间：<text>{{item.leaveTime}}</text></view>
				</view>
			</view>
		</view>
		<view class="tip">{{list.length>0?'已显示全部记录':'暂无记录'}}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				h: uni.getSystemInfoSync().windowHeight,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				list:[]
			}
		},
		onLoad(option) {
			if(option.licence){
				this.getDetails(option.licence);
			}
		},
		methods: {
			getDetails(licence){
				this.$api.get('/travel/wisdom/ParkingRecords/whole?openId='+JSON.parse(uni.getStorageSync('userInfo')).openId).then(res=>{
					if(res.data.code===0){
						this.list = res.data.data;
						this.list.forEach(l=>{
							let diff = Date.parse(new Date(l.leaveTime))-Date.parse(new Date(l.enterTime));
							let diffM = Math.ceil(diff/1000/60);
							let h = Math.floor(diffM/60);
							let m = Math.ceil(diffM%60);
							l.parkTime = h+'小时'+m+'分钟'
						})
					}else this.$showModal(res.data.msg);
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.page{
		padding: 20rpx 24rpx;
		background: #F5F8FA;
		&>view{
			border-radius: 16rpx;
			margin-top: 20rpx;
			background: #fff;
			padding: 20rpx 24rpx 31rpx;
			box-sizing: border-box;
			
			.licence{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-bottom: 20rpx;
				border-bottom: 1rpx solid rgba(112, 112, 112, .1);
				margin-bottom: 30rpx;
				text{
					font-family: PingFang SC;
					&:first-child{
						font-size: 36rpx;
						font-weight: bold;
						color: #333333;
					}
					&:last-child{
						font-size: 32rpx;
						font-weight: 500;
						color: #FE401A;
					}
				}
			}
			
			.addr{
				&>view{
					margin-top: 17rpx;
					display: flex;
					align-items: center;
					image{
						width: 20rpx;
						height: 20rpx;
					}
					text{
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #333333;
						margin-left: 15rpx;
					}
					&:first-child{
						margin-top: 0;
						image{
							height: 25rpx;
						}
					}
				}
			}
			
			.time{
				margin-top: 30rpx;
				&>view{
					margin-top: 10rpx;
					display: flex;
					align-items: center;
					.t_in,.t_out{
						width: 10rpx;
						height: 10rpx;
						border-radius: 50%;
					}
					.t_in{
						background: #29BC9B;
					}
					.t_out{
						background: #E82D64;
					}
					.t_text{
						margin-left: 20rpx;
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #999999;
						text{
							color: #333333;
						}
					}
					
					&:first-child{
						margin-top: 0;
					}
				}
			}
		}
		
		.tip {
			width: 100%;
			text-align: center;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			line-height: 33rpx;
			margin: 56rpx 0;
			background: transparent;
		}
	}
</style>